/<template>
  <div class="list">
    <slot name="list"></slot>
    <div>
      <ul>
        <li
          v-for="(item, index) in list"
          :key="item.id"
          @click="num = index"
          :class="{ on: num == index }"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Mock from "mockjs";
const data = Mock.mock({
  "list|10": [
    {
      title: "@ctitle(2,4)",
      id: "@id",
    },
  ],
});
export default {
  data() {
    return {
      list: data.list,
      num: 0,
    };
  },
};
</script>

<style lang='scss'>
.list {
  width: 100%;
  height: 40px;
  div {
    width: 100%;
    height: 40px;
    overflow-x: scroll;
  }
  ul {
    width: 1000px;
    height: 100%;
    line-height: 40px;
    display: flex;
    background: #9f0;
    justify-content: space-around;
    align-items: center;
  }
}
.on {
  color: orangered;
}
</style>